<template>
  <!-- 猜你喜欢标题 -->
  <div class="like">
    <div class="like-top">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xihuan"></use>
      </svg>&nbsp;猜你喜欢
    </div>
    <!-- 具体喜欢的内容的集合 -->
    <ul>
      <!-- 左边图片 -->
      <li class="like-item"
          v-for="(item,key) of likeList"
          :key="key"
          @click="toDetails(item.title)">

        <div class="like-left">
          <img :src=item.imgUrl>
        </div>
        <!-- 右边介绍 -->
        <div class="like-right">
          <div class="like-title">{{item.title}}</div>
          <!-- iconfont引入五个星星图标 -->
          <div class="like-massage">
            <svg class="icon1" aria-hidden="true">
              <use xlink:href="#icon-xingxingx"></use>
            </svg>
            <svg class="icon2" aria-hidden="true">
              <use xlink:href="#icon-xingxingx"></use>
            </svg>
            <svg class="icon3" aria-hidden="true">
              <use xlink:href="#icon-xingxingx"></use>
            </svg>
            <svg class="icon4" aria-hidden="true">
              <use xlink:href="#icon-xingxingx"></use>
            </svg>
            <svg class="icon5" aria-hidden="true">
              <use xlink:href="#icon-xingxingx"></use>
            </svg>
            {{item.comment}}条评论
          </div>
          <div class="like-money">
            <span class="like-money-one">￥<span class="like-money-two">{{item.money}}</span></span>起
            <span class="like-region">{{item.area}}</span>
          </div>
        </div>
      </li>

    </ul>
    <a class="like-view-all" href="javascript:;">查看所有产品</a>
  </div>

</template>

<script>
export default {
  name: 'HomeLike',
  props: {
    likeList: Array
  },
  data () {
    return {
    }
  },
  methods: {
    toDetails (scenicSpot) {
      this.$router.push('/details')
      console.log(scenicSpot)
      // 将点击哪个 就将哪个的景点名字传给vuex，在主页通过两个值对比 将对应的景点数据传入渲染
      this.$store.commit('changeScenicSpot', scenicSpot)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/publicStyle.styl'
  @import '~styles/mixins.styl'
  .like
    background $bgWhite
    margin-top .2rem
    padding 0 .2rem
    .like-top
      padding .3rem 0
      .icon
        width .33rem
        height .40rem
        vertical-align -0.15em
        fill currentColor
        overflow hidden
    .like-item
      overflow hidden
      border-bottom 1px solid #f0f0f0
      padding-bottom .2rem
      padding-top .2rem
      .like-left
        float left
        img
          width 2rem
          height 2rem
    .like-right
      overflow hidden
      padding-left .2rem
      .like-title
        font-size .34rem
        color #212121
        margin-top .2rem
        ellipsis()
      .like-massage
        margin-top .3rem
        color #616161
        font-size .24rem
        padding-left 2.4rem
        position relative
        // 一星
        .icon1
          position absolute
          left -.15rem
          top -.18rem
          width .6rem
          height .6rem
        // 二星
        .icon2
          position absolute
          left .28rem
          top -.18rem
          width .6rem
          height .6rem
        // 三星
        .icon3
          position absolute
          left .71rem
          top -.18rem
          width .6rem
          height .6rem
        // 四星
        .icon4
          position absolute
          left 1.14rem
          top -.18rem
          width .6rem
          height .6rem
        // 五星
        .icon5
          position absolute
          left 1.57rem
          top -.18rem
          width .6rem
          height .6rem
      .like-money
        position relative
        margin-top .4rem
        color #616161
        .like-money-one
          color #ff8300
          font-size .25rem
          font-weight bold
        .like-money-two
          color #ff8300
          font-size .4rem
          font-weight:normal
        .like-region
          position absolute
          right 0
          top .1rem
          font-size .1rem
          ellipsis()
    .like-view-all
      display block
      padding .3rem 0
      text-align center
      line-height 0.4rem
      font-size .35rem
</style>
